//首页页面
import React from "react";
//导入antd mobile 模块
import {Flex,Carousel,Grid} from 'antd-mobile-v2';
import { API } from "../../utils/api";
//导入CSS样式
import "./index.scss"
//导入自带的图片，用于页内导航2的4个按钮展示
import nav1 from "../../images/nav-1.png"
import nav2 from "../../images/nav-2.png"
import nav3 from "../../images/nav-3.png"
import nav4 from "../../images/nav-4.png"
//导入高阶组件withHook
import withHook from "../../utils/Withhook"
//导入获取环境变量配置的url（http://localhost:8080）
import { BASE_URL } from "../../utils/url";
//导入模块组件Searchnavbar（搜索导航栏）
import Searchnavbar from "../../components/Searchnavbar/index2";

//首页页内导航指定数据，ID，文本，图片，路由跳转路径
const navlist=[
{id:1,text:"整租",imgs:nav1,navpath:"/home/list"},
{id:2,text:"合租",imgs:nav2,navpath:"/home/list"},
{id:3,text:"地图找房",imgs:nav3,navpath:"/map"},
{id:4,text:"去出租",imgs:nav4,navpath:"/rent/add"}]


class HomeIndex extends React.Component{
    state = {
        swipers:[],//数组：存储轮播图数据
        isswiper:false,//Boolean：判断轮播图是否有数据了
        groups:[],//数组：存储租房小组区域数据
        indexnews:[],//数组：存储首页最新咨询区域数据
        currentcityname:""//字符串：存储当前定位城市（只包含本地数据接口只北上广）
      }

    //1、调用API，获取轮播图数据
      async getSwipers(){
        //调用API获取轮播图，并存入状态
        const res=await API.get('/home/swiper')
        this.setState({
            swipers:res.data.body,
            isswiper:true
        })}

    //2、调用API，获取当前位置租房小组数据，并存入状态
      async getGroups(){
        const res=await API.get("/home/groups",{params:{area:"AREA%7C88cff55c-aaa4-e2e0"}}) /* //变量指定,area为当前区域  */
        this.setState({
              groups:res.data.body
          })}

    //3、调用API，获取首页最新资讯数据，并存入状态
    async getindexnew(){
        const res=await API.get("/home/news",{params:{area:"AREA%7C88cff55c-aaa4-e2e0"}}) /* //变量指定,area为当前区域  */
        this.setState({
            indexnews:res.data.body
          })}

    //渲染函数1：渲染轮播图方法
    renderSwipers(){
      return this.state.swipers.map(item => (
      <a key={item.id} style={{ display: 'inline-block', width: '100%', height: 212 }}>
        <img src={BASE_URL+item.imgSrc} alt="" style={{ width: '100%', verticalAlign: 'top' }} />
      </a>
    ))}
    //渲染函数2：获取首页页内导航区域
    rendernav(){
      return(
          navlist.map(item=> 
          <Flex.Item key={item.id} onClick={()=>this.props.to(item.navpath)}>
            <img src={item.imgs} alt="/" />
            <h2>{item.text}</h2>
          </Flex.Item>
      ))}

    //渲染函数3：最新咨询区域
      rendernews(){
          return this.state.indexnews.map(item=>
            <Flex  className="home-newsitem"  justify="between">
              <img src={BASE_URL+item.imgSrc}></img>
              <div className="textbox">
                <h3>{item.title}</h3>
                <Flex className="textbox2" justify="between">
                    <span>{item.from}</span>
                    <span>{item.date}</span>
                </Flex>
              </div>
            </Flex>
          )
      }

    //生命周期开始渲染
       async componentDidMount() {
        //本地存储读取城市信息,用于判断 localStorage 中是否有定位城市
        const LocalCity=JSON.parse(localStorage.getItem("hkzf_city"));
        this.getSwipers();//获取轮播图数据
        this.getGroups();//获取租房小组数据
        this.getindexnew();//获取最新咨询数据
        //获取IP定位城市,（由百度地图APi提供）
        const myCity = new window.BMap.LocalCity();
        await myCity.get(res=>{
          if(LocalCity){
            this.setState({
              currentcityname:LocalCity.label//已经存储城市在localStorage，则将其作为当前城市显示在顶部导航
            })}
          else{
            this.setState({//若无本地存储的城市信息，默当前定位城市为当前城市
              currentcityname:res.name
            })}})}



      render() {
        return (
          <div  className="index">
        {/* 1 轮播图 */}
            <div className="swipers">
              {/* 判断是否获得了轮播图数组，防止渲染空轮播图 */}
                {this.state.isswiper?(
                <Carousel
                autoplay//轮播图是否自动切换
                infinite //是否循环播放
                >
                {this.renderSwipers()}{/* 调用渲染函数 */}
                </Carousel>
                ):(<></>)} 
                {/* 轮播图盒内  顶部搜索导航栏 */}
                <Searchnavbar cityname={this.state.currentcityname}></Searchnavbar>
            </div>

        {/* 2 首页内置导航栏 */}
             <Flex className="home_nva">
               {/* 调用渲染函数 */}
                {this.rendernav()}
            </Flex>

        {/* 3 租房小组 */}
            <div className="groups">
                <h2 className="title">租房小组
                    <span className="more">更多</span>
                </h2>
                <Grid 
                data={this.state.groups} /* 渲染的小组数据 */
                columnNum={2} /* 列数  */
                square={false}//每个格子是否固定为正方形
                hasLine={false}//是否有边框
                /* renderItem自定义渲染函数,这里的item可以遍历上面的data */
                renderItem={(item)=>(
                    <Flex className="groups-item" justify="around" key={item.id}>
                        <div className="textbox">
                            <p>{item.title}</p>
                            <span>{item.desc}</span>
                        </div>
                        <img src={BASE_URL+item.imgSrc}></img>
                    </Flex>
                )}      
                />
            </div>
        {/* 4 最新咨询 */}
            {this.rendernews()}


        </div>
        );
      }
}
const HomeIndex_2 =withHook(HomeIndex) 
export default HomeIndex_2